<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>方圆小程序后台管理</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/cropper.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">

  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/all.css">
  <link rel="stylesheet" href="css/public.css">

  <style>
  a:hover{
    text-decoration: none;
  }
</style>

</head>
<body class="layui-layout-body" onload="init()">
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">方圆小程序</div>
      <!-- 头部区域（可配合layui已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item"><a href="index.html">首页</a></li>
        <li class="layui-nav-item"><a href="shopdata.html">运营</a></li>
        <li class="layui-nav-item"><a href="setting.html">设置</a></li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">手边卡券</li>
        <li class="layui-nav-item">
          <a href="center.html">
            你好，170600001
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">基本资料</a></dd>
            <dd><a href="">安全设置</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">帮助</a></li>
      </ul>
    </div>
    
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree">
          <li class="layui-nav-item">
            <a href="javascript:;"><img src="images/shop_normal.png" alt="" class="menuicon">商户管理</a>
            <dl class="layui-nav-child">
              <dd><a href="shopdata.html">商户数据</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;"><img src="images/mendian_normal.png" alt="" class="menuicon">门店展示管理</a>
            <dl class="layui-nav-child">
              <dd><a href="paidstore.html">付费门店管理</a></dd>
              <dd><a href="freestore.html">免费入驻管理</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><img src="images/guanggao__normal.png" alt="" class="menuicon">广告位设置</a>
            <dl class="layui-nav-child">
              <dd><a href="topbanner.html">顶部Banner设置</a></dd>
              <dd><a href="recommend.html">推荐店铺设置</a></dd>
              <dd><a href="anglemark.html">角标店铺设置</a></dd>
            </dl>
          </li>        
        </ul>
      </div>
    </div>
    
    <div class="layui-body j-layui-body">
      <!-- 内容主体区域 -->
      <div class="j-contaner">
        <span class="layui-breadcrumb">
          <a href="shopdata.html">运营</a>
          <a href="paidstore.html">门店展示管理</a>
          <a href="freestore.html">免费入驻管理</a>
          <a href="newfreestore.html">新增入驻门店</a>
        </span>
      </div>

      <div class="j-contaner">
        <div class="j-contaner-s">
          <div class="shuxian layui-inline">
          </div>新增入驻门店
        </div>

        <div class="layui-form j-contaner">
          <form action="">
            <div class="layui-form-item">
              <label class="layui-form-label layui-inline j-lable10"><lable class="xinghao">*</lable>门店LOGO：</label>
              <div class="freeaddpic">
                <img src="" alt="" id="logo" class="logobox">
                <div class="chooseimg">
                  <label for="xzfile" class="freefilelable"></label>
                  <input type="file" name="file" id="xzfile" class="inputfile"  data-img="logo" />
                </div>
              </div>
              <label class="layui-form-label j-lable33 fl">(建议图片尺寸：100X100)</label>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11"><lable class="xinghao">*</lable>门店名称：</label>
              <input type="text" name="shopname" placeholder="限15字以内" autocomplete="off" class="layui-input j-input" id="shopname"> 
            </div>
            <div>
              <label class="lable16 shopname1 tips">限15字以内</label>
              <label class="lable16 shopname2 tips">请填写此项</label>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11"><lable class="xinghao">*</lable>联系电话：</label>
              <input type="tel" name="phone" placeholder="请输入电话(18字以内)" autocomplete="off" class="layui-input j-input" required id="phone"> 
            </div>
            <div>
              <label class="lable16 phone1 tips">限18字以内</label>
              <label class="lable16 phone2 tips">请填写此项</label>
            </div>
            
             <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11">选择行业：</label>
          <div class=" layui-inline">
            <select id="firstIndustry" name="firstIndustry" lay-filter="firstIndustry">
              <option value="">选择一级行业</option>
            </select>
          </div>
          <div class="layui-inline">
            <select id="secondIndustry" name="secondIndustry" lay-filter="secondIndustry">
              <option value="">选择二级行业</option>
            </select>
          </div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11">商户地址：</label>
              <div class="layui-inline">
                <select name="sheng">
                  <option value="">选择省</option>
                </select>
              </div>
              <div class="layui-inline">
                <select name="shi">
                  <option value="">选择市</option>
                </select>
              </div>
              <div class="layui-inline">
                <select name="qu">
                  <option value="">选择区</option>
                </select>
              </div>
            </div>
         
            <div class="layui-form-item">
              <div>
                <label class="layui-form-label layui-inline fl lable11">详细地址：</label>
                <input id="address" type="textbox" value="" class="layui-input j-input fl" placeholder="请输入详细地址">
                <button onclick="codeAddress()" class="layui-btn layui-btn-normal j-btn">搜索</button>
              </div>
              <div id="container" class="j-container layui-inline"></div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11">营业时间：</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input j-input" id="date" placeholder="请填写营业时间">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11">店内设施：</label>
              <input type="checkbox" name="wifi" title="wifi" lay-skin="primary">
              <input type="checkbox" name="car" title="停车位" lay-skin="primary"> 
              <input type="checkbox" name="ali" title="支付宝支付" lay-skin="primary"> 
              <input type="checkbox" name="weixin" title="微信支付" lay-skin="primary"> 
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label layui-inline lable11">店铺简介：</label>
              <textarea name="jianjie" placeholder="请填写店铺简介(140字以内)" class="layui-textarea j-input" id="jianjie"></textarea>
            </div>
            <div>
              <label class="lable16 jianjie tips">限140字以内</label>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label j-lable1 lable11"><lable class="xinghao">*</lable>选择图片：</label>
              <div class="freeaddpic2">
                <img src="" alt="" id="banner111" class="picbox">
                <div class="chooseimg">
                  <label for="xzfile2" class="freefilelable2"></label>
                  <input type="file" name="file" id="xzfile2" class="inputfile"  data-img="banner111" />
                </div>
              </div>
              <label class="layui-form-label j-lable333 fl">(建议图片尺寸：864X359)</label>
            </div>

            <div class="layui-form-item ml4">
              <a class="layui-btn layui-btn-normal" id="submit" onclick="doSubimt()">提交</a>
              <button class="layui-btn layui-btn-normal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div id="jc" style="display: none;">
    <div class="jctop">
      <h2>上传图片</h2>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <div class="img-container"  style="width: 848px;height: 464px">
            <img src="" alt="Picture" id="cropimg">
          </div>
        </div>
        <div class="col-md-3">
          <div class="docs-preview clearfix">
            <div class="img-preview preview-lg"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="btn-group btn-group-crop ml5">
          <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="" type="button" onclick="closelayer()">
            <span class="docs-tooltip">
              裁剪
            </span>
          </button>
        </div>
        <div class="btn-group btn-group-crop" id="tzbl1">
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="1">
            <input class="sr-only" value="1" type="radio">
            <span class="docs-tooltip">
              100:100
            </span>
          </label>
        </div>
        <div class="btn-group btn-group-crop" id="tzbl2">
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="1">
            <input class="sr-only" value="1" type="radio">
            <span class="docs-tooltip">
              864X359
            </span>
          </label>
        </div>
      </div>
    </div>
  </div>


  <!-- 地图 -->
  <script charset="utf-8" src="js/map.js"></script>

  <script src="layui/layui.js"></script>
  <script src="js/jquery.min.js"></script>

  <script src="js/bootstrap.min.js"></script>
  <script src="js/cropper.js"></script>
  <script src="js/main.js"></script>

  <script>
    var global_id='';
    layui.use(['element','laydate','form'], function(){
      var element = layui.element;
      var $ = layui.jquery;
      var laydate = layui.laydate;
      var form = layui.form;

      laydate.render({
        elem: '#date'
        ,showBottom: false
      });
    });

    $("input").focus(function(){
      $(".tips").hide();
    });

    function doSubimt(){
      var shopname = $("#shopname").val();
      var phone = $("#phone").val();
      var jianjie = $("#jianjie").val();

      if(shopname.length > 15){
        $(".shopname1").show();
        return;
      }else if(phone.length == 0){
        $(".shopname2").show();
        return;
      }else if(phone.length> 18){
        $(".phone1").show();
        return;
      }else if(phone.length == 0){
        $(".phone2").show();
        return;
      }else if(jianjie.length > 140){
        $(".jianjie").show();
        return;
      }
    }


    $('#xzfile').on('change', function(ev) {
      global_id = ev.currentTarget.dataset.img;
      let $file = $(this);
      let fileObj = $file[0];
      let windowURL = window.URL || window.webkitURL;
      let dataURL = null;
      if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
      dataURL = windowURL.createObjectURL(fileObj.files[0]);
      $("#cropimg").attr('src', dataURL);
      $("#cropimg").cropper({
        aspectRatio:  1 / 1,
        viewMode : 1,
        rotatable: false,
        guides :false,
        dragMode : "move",
        background : true,
        movable : true,
        cropBoxMovable :false,
        cropBoxResizable :false,
      });
      $("#cropimg").cropper('replace', dataURL);
      
      cjpic();
      $("#tzbl1").show();
      $("#tzbl2").hide();
    });

    $('#xzfile2').on('change', function(ev) {
      global_id = ev.currentTarget.dataset.img;
      let $file = $(this);
      let fileObj = $file[0];
      let windowURL = window.URL || window.webkitURL;
      let dataURL = null;
      if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
      dataURL = windowURL.createObjectURL(fileObj.files[0]);
      $("#cropimg").attr('src', dataURL);
      $("#cropimg").cropper({
        aspectRatio:  16 / 9,

        viewMode : 1,
        rotatable: false,
        guides :false,
        dragMode : "move",
        background : true,
        movable : true,
        cropBoxMovable :false,
        cropBoxResizable :false,
      });
      console.log(1),
      $("#cropimg").cropper('replace', dataURL);

      cjpic();
      $("#tzbl1").hide();
      $("#tzbl2").show();
    });

    function cjpic(){
      layer.open({
        type: 1,
        title: false,
        closeBtn: true,
        shadeClose: true,
        shade: 0.55,
        area: ['1300px', '610px'],
        isOutAnim: true,
        content: $('#jc'),
        success: function (layero, index) {

        }
      });
    };

    function closelayer(){
      layer.close(layer.index);
    };
  </script>
</body>
</html>